<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mobile Emulator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style>
        body
        {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
        .phone.portrait
        {
            padding: 78px 25px;
            width: 368px;
            height: 637px;
            background: url(assets/img/phone-p.jpg) no-repeat;
        }
        .phone.landscape {
            padding: 22px 79px;
            width: 637px;
            height: 367px;
            background: url(assets/img/phone-l.jpg) no-repeat;
        }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">SmartLator</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a id="lnkAbout" href="#about" rel="popover" data-content="An agile tool code named SmartLator (SMART EMULATOR) to test phone & tablet websites, the original idea was inspired from SenchaTouch documentation website. This tool was created by Vmoksha Enterprise Mobility Team using Twitter Bootstrapper! " data-original-title="<center>SmartLator v1.0</center>">About</a></li>
              <li><a id="lnkContact" href="#contact" rel="popover" data-content="2799 & 2800, Srinidhi, Sector-1,</br>27th Main, HSR Layout,</br>Bangalore-560102</br>Tel:+91(80)25053500,</br>Fax:+91 (80)22580501</br>Email: mobidev@vmokshagroup.com" data-original-title="<center>Vmoksha Technologies</center>">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Smart phone & tablet websites emulator</h1>
      <p>&nbsp;</p>
    <div>
        <form class="well form-inline">
        <div class="input-append">
                <input class="span4" id="txtAppUrl" size="16" type="text" placeholder="Smart phone [or] tablet website url"><button class="btn btn-success" id="btnGo" type="button">Go!</button>


        </div>

        <label class="checkbox">
            <div class="btn-group" data-toggle="buttons-radio">
                <button class="btn btn-danger" id="btnPortrait">
                    Portrait</button>
                <button class="btn btn-danger active" id="btnLandscape">
                    Landscape</button>
            </div>
        </label>
        </form>

        <div class="phone landscape" id="emulator">

        </div>
        <h3>Example Mobile Websites</h3>
        <ul>

            <li>http://m.siriusxm.com/</li>
            <li>http://www.mba-multimedia.mobi/</li>
            <li>http://mobile.dungs.com/en/home.html</li>
            <li>http://m.jeep.com/en/mobile/home.html?</li>
            <li>http://mhome.cisco.com/</li>
            <li>https://m.verizonwireless.com/</li>
            <li>http://development.wgo.senchafy.com</li>
            <li>http://10.10.5.30/jigglebugg/pages/landingpage.html</li>
            <li>http://59.144.5.168/jigglebugg/pages/landingpage.html</li>
        </ul>
        </br>
        <span class="label label-info">Note</span>   </br>
        <ul>
            <li>The idea was inspired from SenchaTouch2.0 documentation examples. They deserve for the credits</li>
            <li>Developed using Twitter Bootstrapper</li>
        </ul>
        </br>
        <span class="label label-important">To be done</span>   </br>
        <ul>
            <li>Tablet emulator</li>
            <li>Preference Settings to enhance productivity during development & testing
            <ul>
                <li>Default Phone / Tablet</li>
                <li>Default Application Url</li>
                <li>Default Portrait / Landscape mode</li>
                <li>Option to enable scroll (iPhone like scroll) for the iFrame (default is no scroll for the iframe)</li>
            </ul>
            </li>
            </li>
        </ul>
    </div>
    
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>

    <script type="text/javascript">
        $(function(){
            $('#lnkAbout').popover({placement:'bottom'});
            $('#lnkContact').popover({placement:'bottom'});
            $("#btnGo").click(function(){
                if($("#fraEmulator").length)
                {
                    loadIframe("fraEmulator",$("#txtAppUrl").val())
                } else{
                    CreateIFrame("fraEmulator",$("#emulator"),$("#txtAppUrl").val());
                }
               //alert($("#txtAppUrl").val());
                //http://localhost/wgo-training/WGO%20GOOGLE%20REPOSITORY/trunk/Source/wgo-vmoksha/Wgo.Sencha/

            });
            $("#btnPortrait").click(function(){
                   $("#fraEmulator").css("width","320px")
                   $("#fraEmulator").css("height","481px")
                   $("#emulator").removeClass("landscape").addClass("portrait")
                return false;
            });

            $("#btnLandscape").click(function(){
                $("#fraEmulator").css("width","481px")
                $("#fraEmulator").css("height","320px")
                $("#emulator").removeClass("portrait").addClass("landscape")
                return false;
            });
        });

        function CreateIFrame(name,target, src) {
            $('<iframe />', {
                name: name,
                id: name,
                scrolling: 'no',
                frameBorder: '0',
                width : '481px',
                height: '320px',
                src: src //'http://localhost/wgo-training/WGO%20GOOGLE%20REPOSITORY/trunk/Source/wgo-vmoksha/Wgo.Sencha/'
            }).appendTo(target);
        }

        function loadIframe(iframeName, url) {
            var $iframe = $('#' + iframeName);
            if ( $iframe.length ) {
                $iframe.attr('src',url);
                return false;
            }
            return true;
        }

    </script>
  </body>
</html>
